<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue框架 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
    <!-- 视图层 -->
     <div id="app">
        <!-- 文本插值 Mustache语法 模板语法-->
         {{msg}}
         <!-- 文本插值还可以存放js表达式 -->
          {{3>10?'YES':'No'}}
          {{str.split(" ").reverse().join(' ')}}
          <!-- 使用v-html 可以识别html代码片段 -->
           <div v-html="a"></div> 
           <!-- 如果想要绑定变量 v-bind进行绑定 -->
            <!-- <img v-bind:src="src" alt=""> -->
             <!-- v-bind指令可以简写为： -->
            <!-- <img width="200px" :src="src" alt=""> -->
            <!-- 给元素绑定事件 使用v-on:事件类型 -->
            <button v-on:click="handler">{{qq}}</button>
            <!-- v-on 可以简写成@ -->
            <button @click="handler(100)">{{qq}}</button>
            <input  @focus="handler1" type="text">
            <input @blur="handler2" type="text">
     </div>
    <script>
        //创建vue实例  vue选项式API
        new Vue({
            //el属性和试图层进行绑定
            el:'#app',
            //vue变量 数据
            data:{
                msg:'hello vue2',
                str:'i love china',
                a:'<a href="https://www.baidu.com">百度一次</a>',
                src:'https://img0.baidu.com/it/u=2191392668,814349101&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1399',
                qq:'获取盐师唐心悦qq'
            },
            //声明函数/方法
            methods: {
                handler(a){
                    alert(a);
                    //methods中获取data vue变量 this this--->实例
                    this.qq=12345697455
                },
                handler1(event){
                    // 获取当前元素 event.target
                    // console.log(event,'事件对象')
                    event.target.style.backgroundcolor='orange';
                },
                handler2(){
                    event.target.style.backgroundcolor='pink';
                }
            },
            // vue实例生命周期 表示vue实例创建完成阶段 此时可以获取data中数据和methods方法
            //最早异步请求只能在created中发起
            created(){
                console.log(this.qq,this.msg)
            }
            
                
                

        })
    </script>
    
</body>
</html>